<template>
    <!--   infomation页面的 上传文件组件-->
    <div class="popup" v-if="show" ref="popup">
        <div class="pop-up">
            <div class="lala" >
                <p>文件上传</p>
                <img src="../../assets/images/del(2).png" alt="" @click="Hide">
            </div>
            <div class="shangchuan" style="position: relative">
                <div class="clearfix">
                    <a-upload :file-list="fileList" :remove="handleRemove"  :before-upload="beforeUpload" class="xuanze" accept=".pptx,.docx,.doc" style="cursor: pointer"  >
                        选择文件 <input type="text" disabled style="background-color: white;cursor: pointer" v-model="this.filename">
                    </a-upload>
                    <div style="cursor: default">文件类型 <input type="text" disabled style="background-color: white" v-model="this.filetype"></div>
                    <div style="cursor: default">文件页数  <a-input-number v-model="pageNumber" :min="1" :max="100000000" :default-value="1" @change="onChange11" style="width: 214px;height:32px;margin-left: 16px;margin-top: 0; border: 1px solid #979797; "/></div>
                    <div style="cursor: default">信息名称 <input type="text" v-model="text"></div>
                    <div class="tree">
                        <p style="cursor: default">组织结构</p>
                        <a-tree-select
                                show-search
                                style="width: 100%"
                                :value="value"
                                :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                                placeholder="请选择"
                                allow-clear
                                multiple
                                tree-default-expand-all
                                @change="onChange"
                                @search="onSearch"
                                @select="onSelect"
                        >
                            <a-tree-select-node v-for="(item,index) in list" :key="item.id" :value="item.id" :title="item.label" >
                                <a-tree-select-node v-for="(item,index1) in list[index].children" :key="item.id" :value="item.id" :title="item.label" >
                                    <a-tree-select-node v-for="(item,index2) in list[index].children[index1].children" :key="item.id" :value="item.label" :title="item.label" >
                                        <a-tree-select-node v-for="item in list[index].children[index1].children[index2].children" :key="item.id" :value="item.id" :title="item.label" >
                                        </a-tree-select-node>
                                    </a-tree-select-node>
                                </a-tree-select-node>
                            </a-tree-select-node>
                        </a-tree-select>
                    </div>
                    <a-button
                            type="primary"
                            :disabled="fileList.length === 0"
                            :loading="uploading"
                            style="margin-top: 16px"
                            @click="handleUpload"
                    >
                        {{ uploading ? '上传中' : '点击上传' }}
                    </a-button>
                </div>
            </div>
            <!--           提示文字-->
            <div class="tishi">
                <p>提示</p>
                <p>1.文件最大支持30M</p>
                <p>2.支持文件格式:pptx,word,doc,docx</p>
                <p>3.选择本地文件上传即可</p>
            </div>
        </div>
    </div>
</template>

<script>
    // import reqwest from 'reqwest';
    import {getCategoryTree, updataInformation, uploadFile} from "../../api/api";
    export default {
        inject:['reload'],
        name: 'popup',
        data() {
            return {
                value: undefined,
                la:true,
                filename:"",
                filetype:"",
                text:'',
                headers: {
                    authorization: 'authorization-text',
                },
                fileList: [],
                uploading: false,
                list:[],
                newList:{},
                show:true,
                pageNumber:1,
                valueV:[],

                type:''
            }
        },
        mounted() {
            this.$nextTick(function () {
                this.popup = this.$refs.popup
                // console.log(this.promat)
            })
        },
        created() {
            getCategoryTree().then(res=>{
                    console.log(res)
                    this.list = res.list
            })
        },
        methods: {
            //tree
            onChange(value) {
                console.log(value);
                this.value = value;
            },
            onSearch() {
                console.log(...arguments);
            },
            onSelect() {
                console.log(...arguments);
            },
            //tree
            onChange11(value) {
                console.log(value);
            },
            Hide() {
                this.popup.style.display = "none"
                console.log(this.popup)
                this.reload()
            },
            handleRemove(file) {
                //这儿实现了只上传一个的目的
                const index = this.fileList.indexOf(file);
                const newFileList = this.fileList.slice();
                newFileList.splice(index-1, 1);
                this.fileList = newFileList;
            },
            beforeUpload(file) {
                const isLt30 = file.size / 1024 / 1024 < 30
                if (!isLt30) {
                    this.$message.error('文件不得大于30MB!')
                }else{
                    console.log(this.pageNumber)
                    const index = this.fileList.indexOf(file);
                    const newFileList = this.fileList.slice();
                    newFileList.splice(index-1, 1);
                    this.fileList = newFileList;
                    this.fileList = [...this.fileList, file];
                    console.log(this.fileList)
                    this.filename=this.fileList[0].name
                    var lll=this.filename.lastIndexOf(".")
                    this.filetype=this.filename.slice(lll)
                    console.log(this.fileList[0])
                    let File = this.fileList[0]
                    uploadFile(1,File).then(res=>{
                        console.log(res)
                        this.newList = res.list[0]
                        console.log(this.newList)
                    }).catch(err=>{
                        console.log(err)
                    })
                }
                return false && isLt30;
            },
            handleUpload() {
                const { fileList } = this;
                const formData = new FormData();
                fileList.forEach(file => {
                    formData.append('files[]', file);
                });
                this.uploading = true;

                // You can use any AJAX library you like
                console.log(this.text)
                // const day = date.getFullYear()+'/'+(date.getMonth()+1)+'/'+date.getDate()
                // console.log(day)
                if(this.filetype === ".pptx"||this.filetype === ".PPTX"){
                    this.type = '1'
                }
                else if(this.filetype ===".docx"||this.filetype === ".DOCX"){
                    this.ype = '2'
                }else if(this.filetype ===".doc"||this.filetype === ".DOC"){
                    this.type='8'
                }
                for (let i = 0 ;i<this.value.length;i++){
                    this.valueV.push(Number(this.value[i]))
                }
                console.log(this.newList.fileName)
                updataInformation(this.valueV.join(","),this.type,this.text,this.newList.fileSize,this.newList.url,this.newList.fileName,this.pageNumber).then(res=>{
                    console.log(res)
                    this.uploading = false;
                    this.$message.success('文件上传成功');
                    this.show = false
                    this.reload()
                }).catch(err=>{
                    console.log(err)
                    this.uploading = false;
                    this.$message.error('文件上传失败');
                })

            },
        },
        components: {}
    }
</script>
<style scoped lang="less">
    .pop-up {
        width: 950px;
        height: 640px;
        background-color: rgba(255, 255, 255, 1);
    }

    .lala {
        width: 870px;
        height: 69px;
        margin: 0 auto;

        p {
            font-size: 16px;
            font-family: PingFangSC-Regular;
            color: #000000;
            opacity: 1;
            float: left;
            margin-top: 24px;
            cursor: default;
        }

        img {
            width: 20px;
            height: 20px;
            float: right;
            margin-top: 24px;
            cursor: pointer;
        }
    }

    .popup {
        position: absolute;
        top: 0;
        left: 0;
        width: 1440px;
        height: 875px;
        background: rgba(0, 0, 0, 0.32);
        box-sizing: border-box;
        padding: 150px;
        padding-left: 304px;
        display: none;
    }

    /*上传的样式*/
    .shangchuan {
        width: 870px;
        height: 400px;
        border: 1px dashed rgba(151, 151, 151, 1);
        margin: 0 auto;
    }

    /*    提示*/
    .tishi {
        width: 870px;
        margin: 0 auto;

        p {
            height: 22px;
            font-size: 16px;
            font-family: PingFangSC-Regular;
            line-height: 22px;
            color: #000000;
            opacity: 1;
            margin-top: 12px;
        }
    }
    /*文件上传的样式*/
    .clearfix {
        text-align: center;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.25);
        div {
            margin-top: 16px;
            input {
                width: 214px;
                height: 32px;
                outline: none;
                border: 1px solid #979797;
                border-radius: 5px;
                padding-left: 10px;
                padding-right: 10px;
                margin-left: 20px;
            }
        }
    }
    /deep/.ant-upload {
        font-size: 14px;
        margin-top: 30px;
        color: rgba(0, 0, 0, 0.25);
        input {
            width: 214px;
            height: 32px;
            outline: none;
            border: 1px solid #979797;
            padding-left: 10px;
            padding-right: 10px;
            margin-left: 20px;
        }
    }

    .tree {
        width: 300px;
        display: flex;
        margin: 0 auto;
        /deep/.ant-select {
            width: 214px !important;
            margin-left: 26px;
        }
    }

    /deep/.ant-upload-list{
        display: none;
    }
</style>
